<template>
	<view class="sendProgramBgc">
		<view class="sendProgramList ">
			<view class="me-fx-row-start-c height borderTop">
				<view class="sendProgramLeft">
					节目主图
				</view>
				<view class="sendProgramRight">
					{{optionsName}}
				</view>
			</view>
			<view class="height me-fx-row-start-c borderTop" @click="adreeBtn">
				<view class="sendProgramLeft">
					约会城市
				</view>
				<view class="sendProgramRight me-fx-row-sb-c">
					<view class="color">
						{{address}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
			<view class="height me-fx-row-start-c borderTop">
				<view class="sendProgramLeft">
					时间
				</view>
				<view class="sendProgramRight befor me-fx-row-sb-c">
					<view class="" @click="selectData">
						{{selectT}}
					</view>
					<view class="color"  @click="selectTime">
						{{selectConcrete}}
					</view>
				</view>
			</view>
			<view class="height me-fx-row-start-c borderTop" @click="expectObjBtn">
				<view class="sendProgramLeft">
					期望对象
				</view>
				<view class="sendProgramRight me-fx-row-sb-c">
					<view class="color">
						{{expectObj}}
					</view>
					<image src="../../static/img/xiala.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="borderTop widthBorder white">
			<view class="picFont">
				约会配图
			</view>
			<view class="uploadBtn">
				<u-upload :action="action" max-count="3" :file-list="fileList"  @on-uploaded="onUploaded" :show-progress='false'
				 :deletable='false'></u-upload>
			</view>
		</view>
		<view class="hint">
			女性未认证不能发布广播，否则收费10社区币
		</view>
		<view class="sureSend" @click="sureSendBtn">
			确认发布
		</view>
		<!-- 城市 -->
		<u-picker mode="region" v-model="show" :default-selector="[0]" @confirm='confirm'></u-picker>
		<!-- 时间 -->
		<u-picker v-model="timeShow" mode="time" @confirm='timeBtn'></u-picker>
		<!-- 期望对象 -->
		<u-picker v-model="objShow" mode="selector" :range="objval" range-key="name" :data-id="objval.id" @confirm='objSure'></u-picker>
		<!-- 具体时间 -->
		<u-picker v-model="jtTimeShow" mode="selector" :range="timeval"  @confirm='timeSure'></u-picker>
		<!-- 弹窗 -->
		<view class="Covering" v-if="remind">
			<view class="coverConter">
				<image src="../../static/img/f6b8c0d387a54a3aa017c1e17b074df.png" mode="" ></image>
				<view class="coverHead">
					提醒
				</view>
				<view class="coverValue">
					您将使用1次特权发布约会广播(今日 剩余10次会员特权)
				</view>
				<view class="coverBtn me-fx-row-sb-c">
					<view class="cancelBtn" @click="cancelBtn">
						取消
					</view>
					<view class="sureBtn" @click="sureBtn">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {url} from "@/utils/api.js"
	export default {
		data() {
			return {
				address: '请选择',
				expectObj: '请选择',
				action: url +'/image/upload',
				fileList: [],
				show: false,
				city: '',
				timeShow: false,
				selectT: '选择日期',
				objval: [],
				objShow: false,
				objIndex: -1,
				expectObjID: -1,
				selectConcrete: '选择时间',
				UrlList:[],
				optionsID:-1,
				optionsName:'',
				jtTimeShow:false,
				timeval:['上午','中午','下午'],
				remind:false
			}
		},
		created() {
			this.objData()
		},
		onLoad(options) {
			if(options.id){
				this.optionsID=options.id
			}
			if(options.name){
				this.optionsName=options.name
			}
		},
		methods: {
			timeSure(e){
			this.selectConcrete=this.timeval[e]
			},
			selectTime(){
				this.jtTimeShow=true
			},
			cancelBtn(){
				this.remind=false
			},
			sureBtn(){
				this.remind=false
			},
			onUploaded(e) {
				let index=0
				console.log(e,e[index].response.url, 'eee')
				this.UrlList.push(e[index].response.url)
				index++
				if(index == 2){
					index=0
				}
			},
			expectObjBtn() {
				this.objShow = true
			},
			adreeBtn() {
				this.show = true
			},
			selectData() {
				this.timeShow = true
			},
			timeBtn(e) {
				console.log(e, 'eee')
				this.selectT = e.year + '-' + e.month + '-' + e.day
			},
			sureSendBtn() {
				if (this.address == '请选择') {
					uni.showToast({
						title: '请选择约会城市',
						duration: 1000,
						icon: 'none'
					})
					return
				} else if (this.selectT == '选择日期') {
					console.log(this.selectT,'this.selectT')
					uni.showToast({
						title: '请选择日期',
						duration: 1000,
						icon: 'none'
					})
					return
				} else if (this.selectConcrete == '选择时间') {
					uni.showToast({
						title: '请选择时间',
						duration: 1000,
						icon: 'none'
					})
					return
				}else if(this.expectObj=='请选择'){
					uni.showToast({
						title: '请选择期望对象',
						duration: 1000,
						icon: 'none'
					})
					return
				}else if(this.UrlList.length <= 0){
					uni.showToast({
						title: '请上传图片',
						duration: 1000,
						icon: 'none'
					})
					return
				}else {
					let data={
						show_menu_id:this.optionsID,
						city:this.address,
						appointed_time:this.selectT+this.selectConcrete,
						expect_obj_tag_id:this.expectObjID,
						images:this.UrlList
					}
					this.$u.post('/publish/show',data).then(res => {
							if (res) {
								uni.showToast({
									title: res.message,
									duration: 1000,
									icon: 'none'
								})
								setTimeout(()=>{
									uni.switchTab({
										url:'../indexPage/station'
									})
								},1000)
							}
						})
						.catch((res) => {
							uni.showToast({
								title: res.message,
								duration: 1000,
								icon: 'none'
							})
						})
				}
			},
			objSure(e) {
				console.log()
				this.objIndex = e[0]
				this.expectObj = this.objval[this.objIndex].name
				this.expectObjID = this.objval[this.objIndex].id
			},
			objData() {
				this.$u.get('/expect_obj_tag/index').then(res => {
						if (res) {
							console.log(res, 'res00')
							this.objval = res.data.list
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			confirm(e) {
				if (e.province.value == '11') {
					this.city = e.province.label
				} else if (e.province.value == '12') {
					this.city = e.province.label
				} else if (e.province.value == '31') {
					this.city = e.province.label
				} else {
					this.city = e.city.label
				}
				this.address = e.area.label + '-' + e.city.label + '-' + e.province.label
			}
		}
	}
</script>

<style>
	.sendProgramBgc {
		width: 100%;
		height: 100%;
		background-color: #F9F6FF;
	}

	.sendProgramList {
		background-color: white;
		border-top: 14rpx solid #F9F5FF;
		padding: 0 29rpx;
		box-sizing: border-box;
	}

	.endProgramList,
	.widthBorder {
		border-top: 14rpx solid #F9F6FF !important;
		padding: 0 29rpx;
		box-sizing: border-box;
	}

	.sendProgramLeft {
		width: 120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(33, 33, 33, 1);
	}

	.height {
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
	}

	.sendProgramRight {
		font-size: 30rpx;
		color: rgba(33, 33, 33, 1);
		margin-left: 63rpx;
		width: 70%;
	}

	.color {
		font-size: 30rpx;
		color: rgba(101, 101, 101, 1);
	}

	.borderTop {
		border-top: 14rpx solid ##F9F5FF;
	}

	.borderTop:nth-of-type(n+2) {
		border-top: 1rpx solid #F9F5FF;
	}

	.sendProgramRight image {
		width: 20rpx;
		height: 10rpx;
	}

	.befor {
		position: relative;
	}

	.befor::before {
		position: absolute;
		top: 50%;
		right: 228rpx;
		transform: translateY(-50%);
		content: '';
		width: 16rpx;
		height: 2rpx;
		background-color: #656565;
	}

	.picFont {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(33, 33, 33, 1);
		margin: 40rpx 0;
	}

	.hint {
		font-size: 26rpx;
		color: rgba(91, 19, 255, 1);
		margin: 30rpx 0;
		text-align: center;
	}

	.white {
		background-color: white;
	}

	.uploadBtn {
		padding: 40rpx 0;
	}

	.sureSend {
		width: 686rpx;
		height: 98rpx;
		background: #5B13FF;
		border-radius: 49rpx;
		line-height: 98rpx;
		text-align: center;
		color: white;
		margin: 100rpx auto 0;
		font-size: 36rpx;
	}
	.coverConter{
		width:86%;
		margin:392rpx auto 0;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		overflow: hidden;
	}
	.coverConter image{
		width: 100%;
		height: 173rpx;
	}
	.coverConter .coverHead{
		font-size:36rpx;
		font-weight:bold;
		color:rgba(51,51,51,1);
		text-align: center;
	}
	.coverConter .coverValue{
		font-size:30rpx;
		color:rgba(85,85,85,1);
		padding: 39rpx 49rpx ;
	}
	.coverBtn  .cancelBtn{
		width:228rpx;
		height:80rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(129,75,253,1);
		border-radius:10rpx;
		color: rgba(129,75,253,1);
		text-align: center;
		line-height: 80rpx;
	}
	.coverBtn .sureBtn {
		width:228rpx;
		height:80rpx;
		background:rgba(129,75,253,1);
		border-radius:10rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
	}
	.coverBtn {
		padding: 48rpx;
	}
</style>
